<template>
    <div>
        <h3>{{ msg }}</h3>
        <p>
            <span>第一种显示方案：$store.state.count --- {{ $store.state.count }}</span><br>
            <span>第二种显示方案：computed:{count(){return this.$store.state.count}} --- {{ count }}</span><br>
            <span>第三种显示方案：mapState  --- {{ count }}</span><br>
            <button @click="$store.commit('add')">+</button>
            <button @click="$store.commit('reduce')">-</button>
        </p>
    </div>
</template>
<script>
import store from "@/vuex/store"
import {mapState} from 'vuex'

export default {
    name:"Vuex",
    data(){
        return {
            msg:"Hello"
        }
    },
    store,
    // computed:{ //第二种显示方案
    //     count(){
    //         return this.$store.state.count;
    //     }
    // }
    // computed:mapState({
    //     count:state=>state.count
    // })
    // computed:mapState(["count"]),//第三种显示方案
    ...mapState(["count"])
}
</script>
<style scoped>
    button{
        width:3rem;
        height:1.5rem;
        font-size:1rem;
    }
</style>